<template>
	<div class="pop-form">
		<el-drawer
			v-if="popType === '1'"
			v-model="visible"
			destroy-on-close
			:title="drawerTitle"
			:append-to-body="appendToBody"
			:size="size"
			:show-close="showClose"
			:close-on-click-modal="closeOnClickModal"
			v-bind="$attrs"
		>
			<template #header="{ close, titleId, titleClass }" v-if="showHeader">
				<slot name="headerTitle" :titleId="titleId" :titleClass="titleClass">
					<div>{{ drawerTitle }}</div>
				</slot>
				<el-button @click="close" v-if="!showClose">返回</el-button>
			</template>
			<div v-loading="loading" :class="{ h100: fullUp }">
				<slot name="formbox"></slot>
			</div>
		</el-drawer>
		<el-dialog
			v-else
			v-model="visible"
			:title="drawerTitle"
			v-bind="$attrs"
			destroy-on-close
			:width="size"
			:close-on-click-modal="closeOnClickModal"
		>
			<div v-loading="loading">
				<slot name="formbox"></slot>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import FormBox from "../../FormBox/index.vue";
import { FromBoxProps } from '../../FormBox/interface/index';
const visible = ref(false);
const loading = ref(false);

interface PopForm {
	itemForm?: FromBoxProps[];
	drawerTitle?: string;
	closeOnClickModal?: boolean; // 是否可以通过点击 modal 关闭 Dialog 默认false
	popType?: string; // 1是抽屉 2是弹框 默认抽屉
	size?: number | string; // Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
	appendToBody?: boolean; // Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true
	showClose?: boolean;
	showHeader?: boolean;
	fullUp?: boolean;
}
withDefaults(defineProps<PopForm>(), {
	drawerTitle: '',
	popType: '2',
	closeOnClickModal: false,
	showHeader: true,
	showClose: true,
	fullUp: false
});
// 将方法、变量暴露给父组件使用，父组件才可通过 ref API拿到子组件暴露的数据
defineExpose({
	visible,
	loading
});
</script>

<style scoped lang="scss">
.pop-form {
	:deep(.el-dialog) {
		padding: 0;
	}
}
</style>
